<template>
  <div>
    <div class="cont">
      <searchBar
        :searchText="searchText"
        @search="searchClick($event)"
      ></searchBar>
      <ul class="imgs">
        <li
          v-for="(item, index) in cate_list"
          :key="index"
          @click="gochclf(item)"
        >
          <img class="cover" :src="item.image | imgSrc" alt="" />
          <span class="name">{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import searchBar from "@/components/searchBar.vue";
import { getCatRes } from "@/utils/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchBar,
  },
  data() {
    //这里存放数据
    return {
      cate_list: [],
      searchText: "",
      cate_banner: "",
    };
  },
  created() {
    this.getCatRes();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    // 跳转分类
    gochclf() {
      // this.$router.push("choiceness");
      this.$router.push({
        name: "choiceness",
        query: {
          id: this.$route.query.categoryId,
        },
      });
    },
    searchClick(e) {
      this.searchText = e;
      this.getCatRes();
    },
    getCatRes() {
      getCatRes({
        one_cat_id: this.$route.query.categoryId,
        cat_name: this.searchText,
      }).then((res) => {
        if (res.code == 1) {
          this.cate_list = res.data.cat_two_res;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.cont {
  margin: 0px 110px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;

  .search {
    width: 50%;
    height: 60px;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
    border-radius: 30px;
    margin: 30px 0px;
    overflow: hidden;
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin-left: 10px;
    }

    input {
      width: 82%;
      height: 100%;
      outline: none;
      border: 0;
      background-color: transparent;
      text-indent: 2em;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
    }

    .btnsearch {
      width: 15%;
      height: 54px;
      background: #ff5757;
      border-radius: 30px;
      // font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 54px;
      border: 0;
      outline: 0;
    }
  }

  .imgs {
    margin-top: 40px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 30px;

    li {
      cursor: pointer;
      width: 519px;
      height: 754px;
      .cover {
        width: 100%;
        height: 702px;
        object-fit: cover;
        margin-bottom: 30px;
      }

      .name {
        font-size: 22px;
        font-weight: bold;
        color: #000000;
        line-height: 38px;
      }
    }
  }
}
</style>
